import counterTwoReducer, { ACTION_TYPE } from "@/reducer/counter2";
import { FC, memo, useReducer } from "react";
import { Link } from "react-router-dom";

const Counter: FC = memo(() => {
  // const [count, dispatch] = useReducer(CounterReducer, 0)
  // const [count, dispatch] = useMyReducer(CounterReducer, 0)
  const [count, dispatch] = useReducer(counterTwoReducer, 0)

  return (
    <div className="w-full h-full flex flex-col">
      <header className="w-full h-50px border-bottom-1px border-solid border-[#ddd] flex-center">头部</header>
      <div className="flex">
        <span>{ count }</span>
        <button 
          onClick={() => dispatch({ type: ACTION_TYPE.PLUS, payload: 2 })} 
          className="w-100px h-30px flex-center bg-pink-300 mx-30px"
        >+</button>
        <button 
          className="w-100px h-30px flex-center bg-pink-300"
          onClick={() => dispatch({ type: ACTION_TYPE.MINUS, payload: 3 })}
        >-</button>
      </div>
      <hr />
      <div>
        <Link to={'/dynamic/about'}>Go Dynamic About Page</Link>
      </div>
    </div>
  )
})

export default Counter